<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./统计图.css">
</head>

<body>
    <div class="map-box">
        <div id="one">模块1</div>
        <div id="two">模块2</div>
        <div id="four">模块4</div>
        <div id="three">模块3</div>
    </div>
    <script src="https://geojson.cn/api/data/china.topo.json"></script>
    <script src="./echarts/echarts/dist/echarts.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('four'));
        var my = echarts.init(document.getElementById('two'));
        //第一个表格
        var m = echarts.init(document.getElementById('one'));
        var mk = echarts.init(document.getElementById('three'));
        //1
        option = {
                    // const proportion = data.filter((item) => item.name === name)[0].proportion;
            title: {
                text: '通知公告',
                padding: [20, 15]
            },
            series: [{
                type: "tree",
                symbolSize: 50, //标记大小
                symbol: 'circle',  //标记样式
                edgeShape: 'polyline',
                edgeForkPosition: '50%',
                initialTreeDepth: 3,  //几级标题
                orient: 'TB', //方向
                right: 260,
                top: 80,

                itemStyle: {
                    borderColor: '#FF7F00',
                    borderWidth: 3,
                    color: 'white',
                },
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        fontSize: 10,
                    },
                },

                data: [{
                    name: `公司员工守则\n\n2018-11-1`,
                    children: [
                        {
                            name: `关于交易手续费优惠政策的通知\n\n2018-10-19`,
                            children: [{
                                name: `国庆节安排通知\n\n2018-10-01`,
                                children: [{
                                    name: `818促销日：全场满5000送500\n\n2018-08-18`
                                }]
                            }]
                        }]
                }],

            }]
        }
        // 第三个表格
        option && m.setOption(option);
        const data = [
            {
                name: '今日',
                value: 4260,
            },
            {
                name: '比昨日',
                value: 3970,
            },
            {
                name: '本周',
                value: 3454,
            },
            {
                name: '上周同期',
                value: 2390,
            },
        ];
        const color = [
            'yellow',
            'purple',
            'blue',
            'orange',
            '#42DEED',
            '#C1CC77',
            '#00AB51',
            '#31B571',
            '#3351E3',
        ];
        const legendData = data.map((item, index) => {
            const tag = index % 6;
            return {
                'name': item.name,
                itemStyle: {
                    color: color[tag] || '',
                },
                'textStyle': {
                    'rich': {
                        'title': {
                            'color': 'black',
                            'fontSize': 14,
                            'width': 70,
                            'fontWeight': 'bold',
                        },
                        'p': {
                            'fontSize': 14,
                            'width': 55,
                            'color': 'black',
                            'shadowColor': '#000',
                            'inactiveColor': '#000',
                            'fontWeight': 'bold',
                        },
                    },
                },
            };
        });
        option = {
            tooltip: {},
            //总销售
            title: {
                text: '订购商品数',
                top: '20px',
            },
            //你的代码
            'legend': {
                // type: 'scroll',
                'show': true,
                'orient': 'vertical',
                'right': 100,
                'top': 'center',
                'itemGap': 25,
                'borderRadius': 5,
                'itemWidth': 10,
                'icon': 'circle',
                'itemHeight': 10,
                data: legendData,
                formatter: function (name) {
                    console.log('name', name);
                    const name1 = name.length > 5 ? `${name.substring(0, 4)}...` : name;
                    const value = data.filter((item) => item.name === name)[0].value;
                    return (
                        `{title|${name1}}{p||   ${value}}`
                    );
                },
            },
            'tooltip': {
                'trigger': 'item',
                backgroundColor: 'pink',
                borderWidth: 1,
                borderColor: '#32A1FF',
                padding: 5,
                textStyle: {
                    color: '#fff'
                },
                formatter: data => {
                    const { name = '', value = '' } = data.data || {};
                    const name1 = name.length > 10 ? `${name.substring(0, 10)} <br /> ${name.substring(10, name.length)}` : name;
                    return `${name1} ${value}`;
                },
            },
            title: {
                text: `{a|253090}\n{b|总销售}`,
                textStyle: {
                    rich: {
                        a: {
                            color: "#000",
                            fontSize: 32,
                            align: "35%",
                        },
                        b: {
                            fontSize: 20,
                            color: "#000",
                            fontWeight: "bold",
                            top: 0,
                            width: 100,
                            height: 100,
                        }
                    },

                },
                x: "45%",
                y: "45%",
                textAlign: "center",
            },
            'series': [
                {
                    'name': '',
                    'type': 'pie',
                    'radius': [
                        '30%',
                        '50%',
                    ],
                    'center': [
                        '45%',
                        '50%',
                    ],
                    'startAngle': 90,
                    'itemStyle': {
                        'shadowBlur': 10,
                        'shadowColor': 'rgba(0, 103, 255, 0.2)',
                        'shadowOffsetX': -5,
                        'shadowOffsetY': 5,

                        color: function (params) {
                            return color[params.dataIndex % 6];
                        },
                    },
                    'label': {
                        show: false,
                    },
                    'labelLine': {
                    },
                    data: data,
                },

            ],
        };
        myChart.setOption(option);
        //数据
        function a(type, url) {
            var p = new Promise((res, rej) => {
                var xhr = new XMLHttpRequest()
                xhr.responseType = "json"
                xhr.open(type, url)
                xhr.onload = () => {
                    if (xhr.status == 200) {
                        res(xhr.response.data)
                    } else {
                        rej(xhr.status)
                    }
                }
                xhr.send()
            })
            return p
        }
        // 第二个图
        a("get", "https://www.zzgoodqc.cn/index.php/index/index/getOrders")
            .then((data) => {
                var arr = data.arr;
                var list = data.list;
                console.log(arr);
                console.log(list);
                option = {

                    title: {
                        text: '订单统计趋势图',
                        top: '20px',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['4月', '5月', '6月', '7月', '8月', '9月',]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [

                        {
                            data: arr,
                            type: 'line',
                            //波浪线
                            smooth: true,
                            areaStyle: {
                                color: 'pink'
                            },
                            itemStyle: {
                                color: "#666"//拐点颜色
                            },

                            symbolSize: 7,//拐点大小,
                        },
                        {
                            data: list,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: 'blue'
                            },
                            itemStyle: {
                                color: "#666"//拐点颜色
                            },
                            symbolSize: 7,//拐点大小,

                        },
                    ],
                };
                my.setOption(option);
            })
            .catch((value) => {
                console.log(value);
            })
        //第四个表格
        option = {
            //你的代码
            title: {
                text: '订单数',
                top: '20px',
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: 'pink',
                padding: 5,
                textStyle: {
                    color: 'pink'
                }
            },
            backgroundColor: "white",
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'orange',
                borderWidth: 1,
                borderColor: 'black',
                padding: 5,
                textStyle: {
                    color: 'black'
                }
            },
            legend: {
                right: 'center',
                top: 5,
                // icon: 'circle',
                itemWidth: 14,
                itemHeight: 10,
                itemGap: 37,
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Source Han Sans CN',
                    fontWeight: 'normal',
                    color: 'black'
                }
            },
            grid: {
                x: '3%',
                y: '15%',
                x2: '5%',
                y2: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: 'black',
                    fontSize: 14,
                    interval: 0,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'black'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'black',
                        type: "black",
                    }
                },
                data: ["11:07", "11:08", "11:09", "11:10", "11:11", "11:12", "11:13"]
            },
            yAxis: [{
                type: 'value',
                min: 0,
                position: 'left',
                nameTextStyle: {
                    color: "black",
                    fontSize: 14,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'black'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#2D4377',
                        type: "dotted",
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "black",
                    }
                },
            },
            {
                type: 'value',
                // name: '降水量',
                min: 0,
                max: 100,
                position: 'right',
                axisLabel: {
                    formatter: '{value}%'
                }
            }, {
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'black',
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    inside: true,
                    lineStyle: {
                        color: 'black',
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "black"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'pink',
                        fontSize: 18
                    },
                },

            },
            {
                type: 'value',
            }
            ],
            series: [{
                name: '比作日',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'purple' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'purple' // 100% 处的颜色
                        }]
                    }
                },
                data: [5, 3, 4, 4, 4, 5, 3]
            }, {
                name: '上周同期',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'blue' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }]
                    }
                },
                data: [6, 4, 4, 2, 5, 7, 5.5]
            }, {
                name: '上月同期',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'green' // 100% 处的颜色
                        }]
                    }
                },
                data: [8, 5, 3, 3, 9, 10, 7]
            }]
        };
        mk.setOption(option);
    </script>
</body>

</html>